<template> 	     
	<view>
		<view class="search-box">
			<image src="http://mall-image.hxyrfwpt.com/static/search_ico.png"></image>
			<input  />
			<view class="search-btn">搜索</view>
		</view>
		<view class="nav-list">
			<text class="nav-list-txt txt-on">全部商品</text>
			<!-- <text class="nav-list-txt">超值拼团</text>
			<text class="nav-list-txt">秒杀专区</text> -->
		</view>
		<view class="pro-list">
			<view class="pro-item">
				<view class="pro-img">
					<image src="http://mall-image.hxyrfwpt.com/static/images/pro-img.png"></image>
				</view>
				<view class="pro-info">
					<view class="pro-title">超级外卖全家桶（赠送当季限定饮品）</view>
					<text class="pro-payed">已售320件</text>
					<view class="pro-price-box">
						<text class="pro-h">￥</text>
						<text class="pro-price">120.99</text>
					</view>
				</view>
			</view>
		<!-- 	<view class="pro-item">
				<view class="pro-img">
					<image src="http://mall-image.hxyrfwpt.com/static/images/pro-img.png"></image>
				</view>
				<view class="pro-info">
					<view class="pro-title">超级外卖全家桶（赠送当季限定饮品）</view>
					<view class="pintuan">
						<view class="pin-num">已拼1031件</view>
						<view class="tuan-num">2人团</view>
					</view>
					
					<view class="pro-price-box">
						<text class="pro-h">￥</text>
						<text class="pro-price">120.99</text>
						<text class="oldpro-price">￥100098.88</text>
					</view>
				</view>
			</view>
			<view class="pro-item">
				<view class="pro-img">
					<image src="http://mall-image.hxyrfwpt.com/static/images/pro-img.png"></image>
				</view>
				<view class="pro-info">
					<view class="pro-title">超级外卖全家桶（赠送当季限定饮品）</view>
					<text class="pro-payed">已售320件</text>
					<view class="pro-price-box">
						<text class="pro-h">￥</text>
						<text class="pro-price">120.99</text>
					</view>
				</view>
			</view>
			<view class="pro-item">
				<view class="pro-img">
					<image src="http://mall-image.hxyrfwpt.com/static/images/pro-img.png"></image>
				</view>
				<view class="pro-info">
					<view class="pro-title">超级外卖全家桶（赠送当季限定饮品）</view>
					<text class="pro-payed">已售320件</text>
					<view class="pro-price-box">
						<text class="pro-h">￥</text>
						<text class="pro-price">120.99</text>
					</view>
				</view>
			</view> -->
		</view>

		
	</view>
</template>
<script></script>
<style scoped lang="less">
	page {
		background-color: #eeeeee !important;
	}
.search-box{
	width: 690rpx;
	height: 60rpx;
	margin-left: 30rpx;
	margin-top: 30rpx;
	background: #ffffff;
	border-radius: 60rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.search-box image{
	width: 36rpx;
	height: 36rpx;
	margin-left: 20rpx;
}
.search-box input{
	width: 480rpx;
	font-size:30rpx-;
}
.search-btn{
	background: #fad9d6;
	width: 100rpx;
	height: 54rpx;
	line-height: 54rpx;
	border-radius: 27rpx;
	text-align: center;
	font-size:30rpx ;
	color: #E64334;
	margin-right:4rpx;
}	
.nav-list{
	margin:30rpx 30rpx 0 30rpx;
	font-size: 30rpx;
	color: #060606;
	font-weight: bold;
}
.nav-list-txt{
	padding:20rpx;
}
.nav-list-txt.txt-on{
	color: #E64334;
}

.pro-list{
	padding:0 15rpx 15rpx;  
}
.pro-item{
	width: 330rpx;
	margin-top: 30rpx;
	margin-left:15rpx;
	margin-right:15rpx;
	border-radius: 12rpx;
	display: inline-block;
}
.pro-img{
	width: 330rpx;
	height: 330rpx;
	align-items: center;
	justify-content: center;
}
.pro-img image{
	width: 330rpx;
	height: 330rpx;
	border-radius: 12rpx 12rpx 0 0;
}
.pro-info{
	padding-left: 20rpx;
	padding-right: 20rpx;
	padding-bottom: 20rpx;
	text-decoration: none;
	border-radius:0 0 12rpx 12rpx;
	background:#F6F6F6;
}
.pro-title{
	padding-top:16rpx;
	padding-bottom:10rpx;
	font-size: 28rpx;
	color: #333333;
	line-height: 42rpx;
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}
.pro-payed{
	font-size: 24rpx;
	color: #999999;
}
.pro-price-box{
	margin-top: 10rpx;
	color: #FE3045;
}
.pro-h{
	font-size: 24rpx;
	font-weight: bold;
}
.pro-price{
	font-size: 30rpx;
	font-weight: bold;
}
.oldpro-price{
	font-size:16rpx;
	color: #999999;
	float: right;
	text-decoration:line-through;
}
.pintuan{
	display: flex;
	justify-content: space-between;
}
.pin-num{
	width: 130rpx;
	height: 36rpx;
	line-height: 36rpx;
	text-align: center;
	font-size: 20rpx;
	color: #E12351;
	background: #FAF0EF;
}
.tuan-num{
	font-size: 18rpx;
	color: #FE3045;
}
	
.content_box {
 background: #f6f6f6;
  
}

.index {
  background-color: #fff;

}

.swiper-item {
  height: 100%;
}

.fixed-header {
  position: fixed;
  z-index: 99;
  // #ifdef H5
  top: 88rpx;
  // #endif

  // #ifndef H5
  top: 0;
  // #endif
  left: 0;
  right: 0;
  // background: #fff;
   background: #eb3729;
  box-shadow: 0 0 20rpx -10rpx #aaa;

  & + .fixed-header-box {
    height: 98rpx;
  }
}

.head_box {
  width: 750rpx;
  // background: #fff;
    background: #eb3729;
  transition: all linear 0.3s;

  /deep/.cuIcon-back {
    display: none;
  }

  .nav-title {
    font-size: 38rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #fff;
  }
}

.cu-bar.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1024;
  // box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}

.cu-bar {
  box-sizing: border-box;

  .index .header {
    height: 64rpx;
    // width: 100%;
    // padding: 0 30rpx;
    // box-sizing: border-box;
  }
}

.header-search {
  transition: all linear 0.3s;
}

.cu-bar .action {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  height: 100%;
  max-height: 100%;

  &:first-child {
    margin-left: 15px;
    font-size: 15px;
  }
}

.home_content_box {
  margin-top: -10rpx;
}

.head_box {
}

.nav-title {
  margin-left: 20rpx;
  line-height: 40px;
}
</style>
